<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>学生表</title>
    <link href="/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="/plugins/bootstrap-table/bootstrap-table.min.css">
    <script src="/js/jquery-3.7.1.min.js"></script>

</head>
<body>
<!--主界面-->
    <div class="container-fluid">

        <!--查询-->
        <div >
            <div style="margin: 20px">
            <label for="sname" style="float: left">可在此输入学生姓名查询：</label>
            <input type="text" class="form-control" id="sname" style="width: 250px;float: left;margin-left: 20px" placeholder="请输入要查询的学生姓名" name="sname" minlength="2" maxlength="10">
            <button id="sbtn" style="float: left;margin-left: 20px" onclick="search();">查询</button>
            </div>
            <!--查询的结果-->
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>number</td>
                    <td>score</td>
                </tr>
                </thead>
                <tbody id="searchTb">

                </tbody>
                </table>
        </div>

        <!-- 新增按钮-->
        <div class="modal-header">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                新增学生
            </button>
        </div>

        <!--表格-->
        <table id="students"></table>
    </div>


<!--弹出框：用于新增和修改-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">学生信息表</h4>
                </div>

                <!--表单开始-->
                <form id="formStudent">
                    <div class="modal-body">
                        <input hidden="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="name">name</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name" required minlength="2" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="number">number</label>
                            <input type="text" class="form-control" id="number" placeholder="number" name="number" required minlength="10" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="score">score</label>
                            <input type="text" class="form-control" id="score" placeholder="score" name="score" max="100">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" >保存学生</button>
                    </div>
                </form>
                <!-- 表单结束-->

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/plugins/jquery-validation/localization/messages_zh.min.js"></script>

<script type="text/javascript">
    $(function () {
        $("#formStudent").validate({
            submitHandler:saveStudent
        })
        console.log("function");
        loadTable();
    })
    //查询
    function search(){
        var sname=$("#sname").val();
        $.ajax({
            url: "/webapi/student/findbyname/"+sname,
            type: "GET",
            success: function(data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    html += "<tr>";
                    html += "<td>" + item.id + "</td>";
                    html += "<td>" + item.name + "</td>";
                    html += "<td>" + item.number + "</td>";
                    html += "<td>" + item.score + "</td>";
                    html += "</tr>";
                }
                $("#searchTb").html(html);
                console.log(data)
            },
        });

    }
    function preAdd(){
        console.log("preAdd");
        $("#id").val(0); //提示新增
    }
    //打开弹出框，获取表单，添加数据
    function saveStudent(){
        console.log("saveStudent");
        var data=$("#formStudent").serialize();
        var id=$("#id").val();
        if (id<1){
            //新增
            $.ajax({
                url: "/webapi/student/insert",
                method:"post",
                data:data
            }).done(function (){
                $('#myModal').modal('hide')
                loadTable();
            });
        }else {
            //更新
            $.ajax({
                url: "/webapi/student/update",
                method:"put",
                data:data
            }).done(function (){
                $('#myModal').modal('hide')
                loadTable();
            });
        }
    }


    function loadTable() {
        $('#students').bootstrapTable('destroy');
        $("#students").bootstrapTable({
            method: "get",    //请求方式（*）
            url: "/webapi/student/findall",  //请求后台的URL（*）
            striped: true,  // 设置为true会有隔行变色效果
            cache: false,  //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //分页
            sortable: false, //是否启用排序
            sidePagination: "server",
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 3,// 如果设置了分页，每页数据条数
            pageList:[4,5,6,7,8,9,10],//可供选择的每页的行数
            strictSearch: false,
            minimumCountColumns: 2,
            clickToSelect:true,
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            cardView:false,
            detailView: false,//是否显示父子表
            smartDisplay: false,
            queryParams: function (params) {
                return{
                    pageSize:params.limit,
                    pageNum:params.offset / params.limit + 1,
                };

            },
            columns: [{
                checkbox: "true",

            },{
                title: "学生id",
                field: 'id'
            },{
                title: '学生姓名',
                field: 'name'
            },{
                title: '学生学号',
                field: 'number'
            },{
                title: '学生成绩',
                field: 'score'
            },{
                field: 'edit',
                title: '编辑',
                width: 100,
                align: 'center',
                valign: 'middle',
                formatter: eFormatter
            },{
                field: 'delete',
                title: '删除',
                width: 100,
                align: 'center',
                valign: 'middle',
                formatter: dFormatter
            }]
        });
    }


    //删除
    function deleteStudent(id){
        if(confirm("确认删除？")){
            $.ajax({
                url:'/webapi/student/delete/'+id,
                method: 'delete'
            }).done(function (){
                //刷新页面
                loadTable();
            })
        }

    }

    //打开弹出框修改数据
    function editStudent(id){
        $("#myModal").modal('show')
        $.ajax({
            url:'/webapi/student/findbyid/'+id
        }).done(function(rs){
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#number").val(rs.number);
            $("#score").val(rs.score);
        })
    }



    //编辑
    function eFormatter(value, row, index) {
        return [
            "<a href='#' onclick='editStudent("+row.id+")'>编辑</a>"
        ].join("")
    }
    //删除
    function dFormatter(value, row, index) {
        return [
            "<a href='#' onclick='deleteStudent("+row.id+")'>删除</a>"
        ].join("")
    }

</script>
</html>